<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./echarts/echarts.min.js"></script>
</head>
<body>
  <!-- 
    js文件中的内容不会直接对页面DOM结构产生影响的放在head里面,一般引用的第三方插件JS都会放在head中优先加载
    js文件中的内容有直接对页面DOM结构进行操作的放在body里面
   -->
   <div id="main" style="width: 600px; height: 400px; margin: 20px auto; border: 5px solid pink;"></div>

  <script>
    // var box =  document.getElementById("main")
    //初始化echarts
    var my_echarts = echarts.init(document.getElementById("main"))

    // 配置echarts
    var options = {
      title:{ //图表的标题
        text:"商品销售记录表",
        textStyle:{
          color:"#f00",
          fontSize:"32"
        }
      },
      legend:{ //图例
        data:["销量","价格"]
      },
      series:[ //设置主体内容
        {
          type:"bar",
          name:"销量",
          data:[5,20,15,380,12],
          label:{

          }
        },
        {
          type:"bar",
          name:"价格",
          data:[195,200,150,380,102],
          label:{
            
          }
        }
      ],
      xAxis:{ // x轴内容
        data:["李宁","乔丹","耐克","阿迪","安踏"]
      },
      yAxis:{ // y轴内容

      }
    }

    //将配置项在echarts中渲染
    my_echarts.setOption(options)




  </script>
</body>
</html>